<template>
  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px" v-loading="dialogLoading" append-to-body>
    <el-form ref="tenantFormRef" :model="form" :rules="rules" label-position="top">
      <el-form-item label="用户组编码" prop="groupCode">
        <el-input v-model="form.groupCode" placeholder="请输入用户组编码" />
      </el-form-item>
      <el-form-item label="用户组名称" prop="groupName">
        <el-input v-model="form.groupName" placeholder="请输入用户组名称" />
      </el-form-item>
<!--      <el-form-item label="显示顺序" prop="groupSort">
        <el-input-number v-model="form.groupSort" :min="0" :max="100" placeholder="请输入用户组名称" />
      </el-form-item>-->
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio v-for="dict in sys_group_status" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="钉钉机器人key" prop="dingRobotKey">
        <el-input v-model="form.dingRobotKey" placeholder="请输入钉钉机器人key" />
      </el-form-item>
      <el-form-item label="钉钉机器人webhook" prop="dingRobotWebHook">
        <el-input v-model="form.dingRobotWebHook" placeholder="请输入钉钉机器人webhook" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" :rows="5" v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="dialogLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="GroupEdit" lang="ts">
import { useDialog } from '@/use/useDialog'
import { GroupForm } from '@/api/system/group/types';
import { getGroup, addGroup, updateGroup } from '@/api/system/group';
const { dialogTitle, dialogVisible, dialogLoading, open, close } = useDialog('新增用户组')

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { sys_group_status } = toRefs<any>(proxy?.useDict('sys_group_status'));

const tenantFormRef = ref<ElFormInstance>()

const emit = defineEmits(['success']);

const initForm: GroupForm = {
  id: undefined,
  groupCode: '',
  groupName: '',
  groupSort: 0,
  status: '0',
  dingRobotKey: '',
  dingRobotWebHook: '',
  remark: ''
}
const rules = reactive({
  groupCode: [{ required: true, message: "用户组编码不能为空", trigger: "blur" }],
  groupName: [{ required: true, message: "用户组名称不能为空", trigger: "blur" }],
  groupSort: [{ required: true, message: "显示顺序不能为空", trigger: "blur" }],
  status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
  dingRobotKey: [{ required: true, message: "钉钉机器人密钥不能为空", trigger: "blur" }],
  dingRobotWebHook: [{ required: true, message: "钉钉机器人通知地址不能为空", trigger: "blur" }],
  remark: [{ max: 200, message: '备注必须少于200字', trigger: 'blur' }],
})
const form = ref<GroupForm>({ ...initForm })
/** 提交按钮 */
const submitForm = () => {
  tenantFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      dialogLoading.value = true;
      if (form.value.id) {
        await updateGroup(form.value).finally(() => dialogLoading.value = false);
      } else {
        await addGroup(form.value).finally(() => dialogLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      dialogVisible.value = false;
      emit('success')
    }
  });
}
const getInfo = async () => {
  dialogLoading.value = true
  let res = await getGroup(form.value.id as string | number).finally(() => dialogLoading.value = false);
  if (res.data) {
    form.value = { ...res.data }
  }
}
const openById = (id: number | string) => {
  if (id) {
    form.value.id = id;
    dialogTitle.value = '编辑用户组'
    getInfo()
    open()
  }
}
const cancel = () => {
  close()
}
defineExpose({ open, openById })
</script>
